<template>
	<view class="container">
		
		<!-- 顶部导航栏 -->
		<view class="nav-tabs">
			<view 
				class="nav-tab" 
				:class="{ active: currentTab === 'records' }"
				@click="switchTab('records')"
			>
				收支记录
			</view>
			<view 
				class="nav-tab" 
				:class="{ active: currentTab === 'todos' }"
				@click="switchTab('todos')"
			>
				待办
			</view>
		</view>
		
		<!-- 左右滑动切换区域 -->
		<view class="swiper-container">
			<swiper 
				:current="tabIndex" 
				@change="tabChange" 
				class="swiper-box"
				:duration="300"
			>
				<!-- 收支记录页面 -->
				<swiper-item class="swiper-item">
					<scroll-view 
						scroll-y 
						class="scroll-area"
						@scrolltolower="onRecordsScrollToLower"
						:refresher-enabled="true"
						:refresher-triggered="recordsRefreshLoading"
						@refresherrefresh="onRecordsRefresh"
					>
						<view class="section-title">
							<text>收支记录</text>
							<view class="filter-container">
								<picker mode="selector" :range="recordTypes" @change="onTypeChange">
									<view class="filter-item">
										<text>{{ selectedRecordType || '全部' }}</text>
									</view>
								</picker>
								<text class="filter-divider">|</text>
								<view class="filter-item" @click="showFilterPopup">
									<text>筛选</text>
								</view>
							</view>
						</view>
						
						<view class="records-list">
							<view 
								v-for="(record, index) in displayedRecords" 
								:key="index" 
								class="record-item"
								:class="{ 'income': record.type === 1, 'expense': record.type === 0 }"
							>
								<view class="record-header">
									<text class="record-amount" :class="{ 'income': record.type === 1, 'expense': record.type === 0 }">
										{{ record.type === 1 ? '+' : '-' }}{{ record.amount }}
									</text>
									<view class="record-meta">
										<text class="record-category">{{ record.category_name }}{{ record.sub_category_name ? ' - ' + record.sub_category_name : '' }}</text>
										<text class="record-date">{{ formatDate(record.record_date) }}</text>
									</view>
								</view>
								<text class="record-description" v-if="record.description">{{ record.description }}</text>
							</view>
							
							<view v-if="displayedRecords.length === 0" class="empty-tip">
								<text>暂无收支记录</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
				<!-- 待办页面 - 便签内容 -->
				<swiper-item class="swiper-item">
					<scroll-view 
						scroll-y 
						class="scroll-area"
						:refresher-enabled="true"
						:refresher-triggered="todosRefreshLoading"
						@refresherrefresh="onTodosRefresh"
					>
						<view class="section-title">
							<text>待办事项</text>
						</view>
						
						<view class="todos-list">
							<view 
								v-for="(todo, index) in todos" 
								:key="index" 
								class="todo-item"
								:class="{'high-priority': todo.priority === 'high', 'medium-priority': todo.priority === 'medium', 'low-priority': todo.priority === 'low'}"
							>
								<view class="todo-header">
									<text class="todo-title">{{ todo.title }}</text>
									<text v-if="todo.tag" class="todo-tag">{{ todo.tag }}</text>
								</view>
								<text class="todo-content">{{ todo.content }}</text>
								<view class="todo-meta">
									<text class="todo-date">{{ todo.date }}</text>
									<text v-if="todo.priority" class="todo-priority" :class="todo.priority + '-priority'">
										{{ getPriorityText(todo.priority) }}
									</text>
								</view>
							</view>
							
							<view v-if="todos.length === 0" class="empty-tip">
								<text>暂无待办事项</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 筛选弹窗 -->
		<uni-popup ref="filterPopup" type="bottom">
			<view class="popup-container">
				<view class="popup-header">
					<text class="popup-title">筛选条件</text>
					<view class="popup-actions">
						<text class="popup-reset" @click="resetFilter">重置</text>
						<text class="popup-close" @click="closeFilterPopup">完成</text>
					</view>
				</view>
				
				<view class="filter-content">
					<!-- 日期筛选 -->
					<view class="filter-section">
						<text class="section-title">日期</text>
						<view class="date-filter">
							<view class="date-input" @click="showStartDatePicker">
								<text>{{ filterCriteria.startDate || '开始日期' }}</text>
							</view>
							<text class="date-separator">至</text>
							<view class="date-input" @click="showEndDatePicker">
								<text>{{ filterCriteria.endDate || '结束日期' }}</text>
							</view>
						</view>
					</view>
					
					<!-- 一级分类筛选 -->
					<view class="filter-section" @click="showCategoryPicker">
						<text class="section-title">一级分类</text>
						<view class="category-display">
							<text>{{ filterCriteria.categoryName || '请选择分类' }}</text>
						</view>
					</view>
					
					<!-- 二级分类筛选 -->
					<view class="filter-section" @click="showSubCategoryPicker" v-if="filterCriteria.categoryId">
						<text class="section-title">二级分类</text>
						<view class="category-display">
							<text>{{ filterCriteria.subCategoryName || '请选择子分类' }}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 日期选择器 -->
		<uni-popup ref="datePopup" type="bottom">
			<view class="popup-container">
				<view class="popup-header">
					<text class="popup-title">选择日期</text>
					<text class="popup-close" @click="closeDatePopup">取消</text>
				</view>
				<view class="date-picker-container">
					<picker-view :value="dateValue" :key="dateValue.join('-')" @change="onDateChange" class="date-picker">
						<picker-view-column>
							<view class="picker-item" v-for="year in years" :key="year">{{ year }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="month in months" :key="month">{{ month }}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker-item" v-for="day in days" :key="day">{{ day }}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="confirm-btn-container">
					<button class="confirm-btn" @click="confirmDate">确定</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 分类选择器 -->
		<uni-popup ref="categoryPopup" type="bottom">
			<view class="popup-container">
				<view class="popup-header">
					<text class="popup-title">选择分类</text>
					<text class="popup-close" @click="closeCategoryPopup">取消</text>
				</view>
				<scroll-view class="category-list" scroll-y>
					<view 
						class="category-item" 
						v-for="category in categories" 
						:key="category.id"
						@click="selectCategory(category)">
						<text>{{ category.name }}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		<!-- 子分类选择器 -->
		<uni-popup ref="subCategoryPopup" type="bottom">
			<view class="popup-container">
				<view class="popup-header">
					<text class="popup-title">选择子分类</text>
					<text class="popup-close" @click="closeSubCategoryPopup">取消</text>
				</view>
				<scroll-view class="category-list" scroll-y>
					<view 
						class="category-item" 
						v-for="subCategory in subCategories" 
						:key="subCategory.id"
						@click="selectSubCategory(subCategory)">
						<text>{{ subCategory.name }}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config/api.js'
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				title: '首页',
				currentTab: 'records', // 默认显示收支记录页面
				todos: [], // 待办事项
				userId: '', // 用户ID
				todosRefreshLoading: false, // 待办列表刷新状态
				
				// 收支记录相关数据
				allRecords: [], // 所有记录
				displayedRecords: [], // 当前显示的记录
				recordsPage: 1, // 当前页码
				recordsPageSize: 10, // 每页记录数
				recordsRefreshLoading: false, // 记录列表刷新状态
				recordTypes: ['全部', '支出', '收入'],
				selectedRecordType: '全部',
				
				// 筛选条件
				filterCriteria: {
					type: null, // 0-支出, 1-收入, null-全部
					startDate: null,
					endDate: null,
					categoryId: null,
					categoryName: null,
					subCategoryId: null,
					subCategoryName: null
				},
				
				// 分类数据
				categories: [], // 一级分类
				subCategories: [], // 二级分类
				
				// 日期选择器数据
				datePickerType: '', // 'start' 或 'end'
				dateValue: [0, 0, 0],
				years: [],
				months: [],
				days: [],
				tempDate: {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1,
					day: new Date().getDate()
				}
			}
		},
		computed: {
			tabIndex() {
				const tabs = ['records', 'todos'];
				return tabs.indexOf(this.currentTab);
			}
		},
		onLoad() {
			// 页面加载时获取数据
			this.loadTodos();
			this.loadRecords();
			this.loadCategories();
			
			// 初始化日期选择器数据
			this.initDatePicker();
			
			// 获取用户ID
			const getOpenId = () => {
				const openid = uni.getStorageSync('openid') 
				this.userId = openid ? openid : 'anonymous';
			};
			getOpenId();
		},
		methods: {
			// 切换导航栏
			switchTab(tab) {
				this.currentTab = tab;
			},
			
			// 滑动切换页面
			tabChange(e) {
				const tabs = ['records', 'todos'];
				this.currentTab = tabs[e.detail.current];
			},
			
			// 获取优先级文本
			getPriorityText(priority) {
				const priorityMap = {
					'low': '低',
					'medium': '中',
					'high': '高'
				};
				return priorityMap[priority] || '中';
			},
			
			// 加载待办事项
			async loadTodos() {
				try {
					// 从服务器获取便签数据
					const res = await uni.request({
						url: config.baseUrl + config.api.notes,
						method: 'GET'
					});
										
					if (res.statusCode === 200 && res.data.data.data) {
						// 检查res.data是否为数组
						let notesData = [];
						if (Array.isArray(res.data.data.data)) {
							// 如果是数组，直接使用
							notesData = res.data.data.data;
						}else {
							// 其他情况，创建空数组
							notesData = [];
						}
						
						// 只获取type为'todo'的数据，并按日期分类便签
						this.todos = notesData
							.filter(note => note.type === 'todo') // 只获取type为'todo'的数据
							.map(note => {
								// 优化日期解析逻辑
								let date = '未知日期';
								
								if (note.create_time) {
									// 尝试解析日期，支持多种格式
									const dateObj = new Date(note.create_time);
									if (!isNaN(dateObj.getTime())) {
										// 格式化为 YYYY-MM-DD
										const year = dateObj.getFullYear();
										const month = String(dateObj.getMonth() + 1).padStart(2, '0');
										const day = String(dateObj.getDate()).padStart(2, '0');
										date = `${year}-${month}-${day}`;
									}
								}
								return {
									id: note.id,
									title: note.title || '无标题',
									content: note.content || note.text || '无内容',
									tag: note.tag || '',
									priority: note.priority || 'medium',
									date: date
								};
							});
					} else {
						// 如果服务器获取失败，尝试从本地存储加载
						this.loadLocalNotes();
					}
				} catch (e) {
					console.error('加载待办事项失败', e);
					// 如果服务器获取失败，尝试从本地存储加载
					this.loadLocalNotes();
				}
			},
			
			// 从本地存储加载便签
			loadLocalNotes() {
				try {
					const notes = uni.getStorageSync('notes');
					if (notes && Array.isArray(notes)) {
						// 只获取type为'todo'的数据，并按日期分类便签
						this.todos = notes
							.filter(note => note.type === 'todo') // 只获取type为'todo'的数据
							.map(note => {
								// 优化日期解析逻辑
								let date = '未知日期';
								if (note.create_time) {
									// 尝试解析日期，支持多种格式
									const dateObj = new Date(note.create_time);
									if (!isNaN(dateObj.getTime())) {
										// 格式化为 YYYY-MM-DD
										const year = dateObj.getFullYear();
										const month = String(dateObj.getMonth() + 1).padStart(2, '0');
										const day = String(dateObj.getDate()).padStart(2, '0');
										date = `${year}-${month}-${day}`;
									}
								}
								return {
									id: note.id,
									title: note.title || '无标题',
									content: note.content || note.text || '无内容',
									tag: note.tag || '',
									priority: note.priority || 'medium',
									date: date
								};
							});
					}
				} catch (e) {
					console.error('加载本地待办事项失败', e);
				}
			},
			
			// 待办列表下拉刷新
			async onTodosRefresh() {
				this.todosRefreshLoading = true;
				try {
					// 重新加载待办数据
					await this.loadTodos();
					// 显示刷新成功的提示
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1000
					});
				} catch (e) {
					console.error('刷新待办失败', e);
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1000
					});
				} finally {
					this.todosRefreshLoading = false;
				}
			},
			
			// ==================== 收支记录相关方法 ====================
			
			// 加载收支记录
			async loadRecords() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.id) {
						console.warn('用户未登录');
						return;
					}
					
					const res = await uni.request({
						url: config.baseUrl + config.api.records,
						method: 'GET',
						data: {
							user_id: userInfo.id,
							page: this.recordsPage,
							page_size: this.recordsPageSize
						}
					});
					
					if (res.statusCode === 200) {
						// 处理返回的数据
						const records = res.data.data.records || res.data.data || [];
						
						if (this.recordsPage === 1) {
							// 第一页，直接替换数据
							this.allRecords = records;
						} else {
							// 后续页，追加数据
							this.allRecords = [...this.allRecords, ...records];
						}
						
						// 应用筛选条件并更新显示的记录
						this.applyFilters();
					} else {
						console.error('获取收支记录失败', res);
						uni.showToast({
							title: '获取记录失败',
							icon: 'none'
						});
					}
				} catch (e) {
					console.error('获取收支记录异常', e);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}
			},
			
			// 收支记录下拉刷新
			async onRecordsRefresh() {
				this.recordsRefreshLoading = true;
				try {
					this.recordsPage = 1;
					await this.loadRecords();
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1000
					});
				} catch (e) {
					console.error('刷新记录失败', e);
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1000
					});
				} finally {
					this.recordsRefreshLoading = false;
				}
			},
			
			// 收支记录滚动到底部加载更多
			async onRecordsScrollToLower() {
				try {
					this.recordsPage++;
					await this.loadRecords();
				} catch (e) {
					console.error('加载更多记录失败', e);
					this.recordsPage--;
				}
			},
			
			// 类型筛选变化
			onTypeChange(e) {
				const selectedIndex = e.detail.value;
				this.selectedRecordType = this.recordTypes[selectedIndex];
				
				// 设置筛选条件
				switch(selectedIndex) {
					case 0: // 全部
						this.filterCriteria.type = null;
						break;
					case 1: // 支出
						this.filterCriteria.type = 0;
						break;
					case 2: // 收入
						this.filterCriteria.type = 1;
						break;
				}
				
				// 应用筛选
				this.applyFilters();
			},
			
			// 应用筛选条件
			applyFilters() {
				let filtered = [...this.allRecords];
				
				// 类型筛选
				if (this.filterCriteria.type !== null) {
					filtered = filtered.filter(record => record.type === this.filterCriteria.type);
				}
				
				// 日期筛选
				if (this.filterCriteria.startDate) {
					filtered = filtered.filter(record => record.record_date >= this.filterCriteria.startDate);
				}
				
				if (this.filterCriteria.endDate) {
					filtered = filtered.filter(record => record.record_date <= this.filterCriteria.endDate);
				}
				
				// 一级分类筛选
				if (this.filterCriteria.categoryId) {
					filtered = filtered.filter(record => record.category_id === this.filterCriteria.categoryId);
				}
				
				// 二级分类筛选
				if (this.filterCriteria.subCategoryId) {
					filtered = filtered.filter(record => record.sub_category_id === this.filterCriteria.subCategoryId);
				}
				
				this.displayedRecords = filtered;
			},
			
			// 格式化日期显示
			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// ==================== 筛选弹窗相关方法 ====================
			
			// 显示筛选弹窗
			showFilterPopup() {
				this.$refs.filterPopup.open();
			},
			
			// 关闭筛选弹窗
			closeFilterPopup() {
				this.$refs.filterPopup.close();
				// 应用筛选条件
				this.applyFilters();
			},
			
			// 重置筛选条件
			resetFilter() {
				this.filterCriteria = {
					type: null,
					startDate: null,
					endDate: null,
					categoryId: null,
					categoryName: null,
					subCategoryId: null,
					subCategoryName: null
				};
				this.selectedRecordType = '全部';
			},
			
			// ==================== 日期选择器相关方法 ====================
			
			// 初始化日期选择器
			initDatePicker() {
				const now = new Date();
				const currentYear = now.getFullYear();
				
				// 生成年份列表（当前年份前后10年）
				this.years = [];
				for (let i = currentYear - 10; i <= currentYear + 10; i++) {
					this.years.push(i);
				}
				
				// 月份列表
				this.months = [];
				for (let i = 1; i <= 12; i++) {
					this.months.push(i);
				}
				
				// 日期列表
				this.days = [];
				for (let i = 1; i <= 31; i++) {
					this.days.push(i);
				}
				
				// 设置默认选中值为当前日期
				const yearIndex = this.years.indexOf(currentYear);
				this.dateValue = [
					yearIndex !== -1 ? yearIndex : 10,
					now.getMonth(),
					now.getDate() - 1
				];
			},
			
			// 显示开始日期选择器
			showStartDatePicker() {
				this.datePickerType = 'start';
				// 强制刷新picker-view
				this.dateValue = [0, 0, 0];
				this.$nextTick(() => {
					const now = new Date();
					const currentYear = now.getFullYear();
					const yearIndex = this.years.indexOf(currentYear);
					const monthIndex = this.months.indexOf(now.getMonth() + 1);
					const dayIndex = this.days.indexOf(now.getDate());
					this.dateValue = [
						yearIndex !== -1 ? yearIndex : 0,
						monthIndex !== -1 ? monthIndex : 0,
						dayIndex !== -1 ? dayIndex : 0
					];
					this.$refs.datePopup.open();
				});
			},
			
			// 显示结束日期选择器
			showEndDatePicker() {
				this.datePickerType = 'end';
				// 强制刷新picker-view
				this.dateValue = [0, 0, 0];
				this.$nextTick(() => {
					const now = new Date();
					const currentYear = now.getFullYear();
					const yearIndex = this.years.indexOf(currentYear);
					const monthIndex = this.months.indexOf(now.getMonth() + 1);
					const dayIndex = this.days.indexOf(now.getDate());
					this.dateValue = [
						yearIndex !== -1 ? yearIndex : 0,
						monthIndex !== -1 ? monthIndex : 0,
						dayIndex !== -1 ? dayIndex : 0
					];
					this.$refs.datePopup.open();
				});
			},
			
			// 日期选择变化
			onDateChange(e) {
				this.dateValue = e.detail.value;
				if (this.dateValue[0] < this.years.length && 
				    this.dateValue[1] < this.months.length && 
				    this.dateValue[2] < this.days.length) {
					this.tempDate.year = this.years[this.dateValue[0]];
					this.tempDate.month = this.months[this.dateValue[1]];
					this.tempDate.day = this.days[this.dateValue[2]];
				}
			},
			
			// 确认选择日期
			confirmDate() {
				if (this.tempDate.year && this.tempDate.month && this.tempDate.day) {
					// 格式化日期为 YYYY-MM-DD
					const month = this.tempDate.month.toString().padStart(2, '0');
					const day = this.tempDate.day.toString().padStart(2, '0');
					const dateStr = `${this.tempDate.year}-${month}-${day}`;
					
					if (this.datePickerType === 'start') {
						this.filterCriteria.startDate = dateStr;
					} else if (this.datePickerType === 'end') {
						this.filterCriteria.endDate = dateStr;
					}
				}
				this.closeDatePopup();
			},
			
			// 关闭日期选择器
			closeDatePopup() {
				this.$refs.datePopup.close();
			},
			
			// ==================== 分类选择器相关方法 ====================
			
			// 加载一级分类
			async loadCategories() {
				try {
					// 首先尝试从本地缓存获取
					const cachedCategories = uni.getStorageSync('billCategories');
					if (cachedCategories) {
						this.categories = cachedCategories;
						return;
					}
					
					// 如果本地没有缓存，则从服务器获取
					const res = await uni.request({
						url: config.baseUrl + config.api.billCategories,
						method: 'GET'
					});
					
					if (res.statusCode === 200) {
						this.categories = res.data.data.categories || res.data || [];
						// 缓存到本地
						uni.setStorageSync('billCategories', this.categories);
					} else {
						console.error('获取一级分类失败', res);
					}
				} catch (e) {
					console.error('获取一级分类异常', e);
				}
			},
			
			// 加载二级分类
			async loadSubCategories(categoryId) {
				try {
					// 首先尝试从本地缓存获取
					const cacheKey = `billSubCategories_${categoryId}`;
					const cachedSubCategories = uni.getStorageSync(cacheKey);
					if (cachedSubCategories) {
						this.subCategories = cachedSubCategories;
						return;
					}
					
					// 如果本地没有缓存，则从服务器获取
					const res = await uni.request({
						url: config.baseUrl + config.api.billSubCategories,
						method: 'GET',
						data: {
							category_id: categoryId
						}
					});
					
					if (res.statusCode === 200) {
						this.subCategories = res.data.data.sub_categories || res.data || [];
						// 缓存到本地
						uni.setStorageSync(cacheKey, this.subCategories);
					} else {
						console.error('获取二级分类失败', res);
					}
				} catch (e) {
					console.error('获取二级分类异常', e);
				}
			},
			
			// 显示分类选择器
			showCategoryPicker() {
				if (!this.categories || this.categories.length === 0) {
					uni.showToast({
						title: '分类数据未加载',
						icon: 'none'
					});
					return;
				}
				this.$refs.categoryPopup.open();
			},
			
			// 关闭分类选择器
			closeCategoryPopup() {
				this.$refs.categoryPopup.close();
			},
			
			// 选择一级分类
			selectCategory(category) {
				this.filterCriteria.categoryId = category.id;
				this.filterCriteria.categoryName = category.name;
				
				// 清空之前的子分类选择
				this.filterCriteria.subCategoryId = null;
				this.filterCriteria.subCategoryName = null;
				this.subCategories = [];
				
				// 加载对应的子分类
				this.loadSubCategories(category.id);
				
				this.closeCategoryPopup();
			},
			
			// 显示子分类选择器
			showSubCategoryPicker() {
				if (!this.filterCriteria.categoryId) {
					uni.showToast({
						title: '请先选择分类',
						icon: 'none'
					});
					return;
				}
				this.$refs.subCategoryPopup.open();
			},
			
			// 关闭子分类选择器
			closeSubCategoryPopup() {
				this.$refs.subCategoryPopup.close();
			},
			
			// 选择二级分类
			selectSubCategory(subCategory) {
				this.filterCriteria.subCategoryId = subCategory.id;
				this.filterCriteria.subCategoryName = subCategory.name;
				this.closeSubCategoryPopup();
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.header {
		background-color: #f0ad4e;
		padding: 40rpx 30rpx;
		text-align: center;
	}
	
	.welcome {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.nav-tabs {
		display: flex;
		flex-direction: row;
		background-color: white;
		border-bottom: 1rpx solid #eee;
	}
	
	.nav-tab {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #666;
	}
	
	.nav-tab.active {
		color: #f0ad4e;
		border-bottom: 4rpx solid #f0ad4e;
	}
	
	.swiper-container {
		flex: 1;
	}
	
	.swiper-box {
		height: calc(100vh - 180rpx); /* 减去header和nav-tabs的高度 */
	}
	
	.swiper-item {
		height: 100%;
	}
	
	.scroll-area {
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.filter-container {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	
	.filter-item {
		padding: 10rpx 15rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}
	
	.filter-divider {
		margin: 0 10rpx;
		color: #ccc;
	}
	
	.todos-list, .records-list {
		margin-bottom: 30rpx;
	}
	
	.todo-item, .record-item {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.todo-item {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		border-left: 4rpx solid #f0ad4e;
	}
	
	.high-priority {
		border-left: 4rpx solid #ff4d4f;
	}
	
	.medium-priority {
		border-left: 4rpx solid #f0ad4e;
	}
	
	.low-priority {
		border-left: 4rpx solid #52c41a;
	}
	
	.todo-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.todo-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
	
	.todo-tag {
		font-size: 24rpx;
		color: #f0ad4e;
		background-color: #fff9f0;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
	}
	
	.todo-content {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.todo-meta {
		display: flex;
		justify-content: space-between;
	}
	
	.todo-date {
		font-size: 24rpx;
		color: #999;
	}
	
	.todo-priority {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
	}
	
	.high-priority-text {
		color: #ff4d4f;
		background-color: #fff1f0;
	}
	
	.medium-priority-text {
		color: #f0ad4e;
		background-color: #fff9f0;
	}
	
	.low-priority-text {
		color: #52c41a;
		background-color: #f6ffed;
	}
	
	/* 收支记录样式 */
	.record-item {
		border-left: 4rpx solid #999;
	}
	
	.record-item.income {
		border-left-color: #52c41a;
	}
	
	.record-item.expense {
		border-left-color: #ff4d4f;
	}
	
	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.record-amount {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.record-amount.income {
		color: #52c41a;
	}
	
	.record-amount.expense {
		color: #ff4d4f;
	}
	
	.record-meta {
		text-align: right;
	}
	
	.record-category {
		font-size: 26rpx;
		color: #666;
		display: block;
	}
	
	.record-date {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-top: 5rpx;
	}
	
	.record-description {
		font-size: 26rpx;
		color: #333;
		display: block;
	}
	
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	/* 弹窗样式 */
	.popup-container {
		background-color: #fff;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		padding: 15rpx;
		max-height: 70vh;
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.popup-actions {
		display: flex;
	}
	
	.popup-reset {
		color: #999;
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	
	.popup-close {
		color: #f0ad4e;
		font-size: 28rpx;
	}
	
	.filter-content {
		padding: 20rpx 0;
	}
	
	.filter-section {
		margin-bottom: 30rpx;
	}
	
	.filter-section .section-title {
		font-size: 28rpx;
		font-weight: normal;
		color: #666;
		margin-bottom: 15rpx;
	}
	
	.date-filter {
		display: flex;
		align-items: center;
	}
	
	.date-input {
		flex: 1;
		padding: 15rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.date-separator {
		margin: 0 20rpx;
		color: #999;
	}
	
	.category-display {
		padding: 15rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.category-list {
		max-height: 300rpx;
	}
	
	.category-item {
		padding: 20rpx 15rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.category-item:last-child {
		border-bottom: none;
	}
	
	.date-picker-container {
		padding: 15rpx 0;
	}
	
	.date-picker {
		height: 250rpx;
	}
	
	.picker-item {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		font-size: 28rpx;
	}
	
	.confirm-btn-container {
		padding: 15rpx 0;
	}
	
	.confirm-btn {
		background-color: #f0ad4e;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 8rpx;
		width: 100%;
		height: 50rpx;
	}
</style>